<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="请假时间">
        <el-date-picker
          v-model="form.dateList"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="请假原因">
        <el-input type="textarea" v-model="form.leavingReason" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">发起请假</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'AddLeave',
  data() {
    return {
      form: {
        dateList: '',
        leavingReason: '',
        result: '未审批'
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
      console.log(this.form)

      if (this.form.dateList != '' && this.form.leavingReason != '') {
        const startTime = this.form.dateList[0]
        const endTime = this.form.dateList[1]
        const employeeId = window.sessionStorage.getItem('employeeId')
        this.$request
          .post('leave/insert', {
            employeeId: employeeId,
            startTime: startTime,
            endTime: endTime,
            result: this.form.result,
            leavingReason: this.form.leavingReason
          })
          .then(res => {
            if (res.data.obj) {
              this.$message.success('发起申请成功！')
              this.form.dateList = []
              this.form.leavingReason = ''
            } else {
              this.$message.warning('发起申请失败')
            }
          })
      } else {
        this.$message.error('请输入完整再次尝试！')
      }
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 400px;
}
</style>
